<template>
  <div class="app-page-scroll">
    <t-card header="基础用法">
      <lg-dict v-model="value" code="UserTypeEnum" />
    </t-card>
    <t-card header="不同组件">
      <div class="cpm-separator">多选：component="t-checkbox-group"</div>
      <lg-dict v-model="checkboxValue" code="UserTypeEnum" component="t-checkbox-group" />

      <!--    <div class="cpm-separator">内置组件：component="checkbox-button"</div>
    <lg-dict v-model="checkboxValue" code="UserTypeEnum" component="checkbox-button" />-->

      <div class="cpm-separator">单选：component="t-radio-group"</div>
      <lg-dict v-model="value" code="UserTypeEnum" component="t-radio-group" />

      <!--    <div class="cpm-separator">内置组件：component="radio-button"</div>
    <lg-dict v-model="value" code="UserTypeEnum" component="radio-button" />-->

      <div class="cpm-separator">引入组件：:component="Select"</div>
      <lg-dict v-model="value" code="UserTypeEnum" :component="Select" />
    </t-card>
    <t-card header="组件插槽">
      <lg-dict v-model="slotValue" code="UserTypeEnum">
        <template #default="{ options }">
          <t-cascader :options="options" />
        </template>
      </lg-dict>
    </t-card>

    <t-card header="增加选项">
      <div class="cpm-separator">增加一个选项：prepend="Object"</div>
      <lg-dict code="UserTypeEnum" :prepend="{ value: '0', label: '全部' }" />

      <div class="cpm-separator">增加多个选项：prepend="Array"</div>
      <lg-dict
        code="UserTypeEnum"
        :prepend="[
          { value: '0', label: '选项1' },
          { value: '1', label: '选项2' },
        ]"
      />

      <div class="cpm-separator">通过函数增加选项：prepend="Function"</div>
      <lg-dict
        code="UserTypeEnum"
        :prepend="
          () => [
            { value: '0', label: '选项1' },
            { value: '1', label: '选项2' },
          ]
        "
      />

      <div class="cpm-separator">后面增加选项：append="Array"</div>
      <lg-dict
        code="UserTypeEnum"
        :append="[
          { value: '0', label: '选项1' },
          { value: '1', label: '选项2' },
        ]"
      />
    </t-card>

    <t-card header="隐藏、禁用、自定义处理">
      <div class="cpm-separator">隐藏选项：hidden-value="1,2"</div>
      <lg-dict v-model="handleValue" code="DeviceTypeEnum" hidden-value="1,2" />
      <div class="cpm-separator">隐藏选项：:hidden-value="[1,2]"</div>
      <lg-dict v-model="handleValue" code="DeviceTypeEnum" :hidden-value="[1, 2]" />

      <div class="cpm-separator">禁用选项：disabled-value="1,2"</div>
      <lg-dict v-model="handleValue" code="DeviceTypeEnum" disabled-value="1,2" />
      <div class="cpm-separator">禁用选项：:disabled-value="[1,2]"</div>
      <lg-dict v-model="handleValue" code="DeviceTypeEnum" :disabled-value="[1, 2]" />

      <div class="cpm-separator">自定义处理：handler</div>
      <lg-dict v-model="handleValue" code="DeviceTypeEnum" :handler="handler" />
    </t-card>
    <!---------------------------------   api说明文档      -------------------------------------------->
    <t-card header="属性">
      <t-base-table :columns="propColumns" :data="propsData" style="width: 100%" />
      <div>其他属性参考使用的组件</div>
    </t-card>
    <t-card header="事件">
      <t-base-table :columns="emitColumns" :data="emitData" style="width: 100%" />
      <div>事件参考使用的组件</div>
    </t-card>
    <t-card header="插槽">
      <t-base-table :columns="slotColumns" :data="slotData" style="width: 100%" />
    </t-card>
    <t-card header="api">
      <t-base-table :columns="apiColumns" :data="apiData" style="width: 100%" />
    </t-card>
  </div>
</template>
<script lang="ts" setup>
import './index.less';
import { ref } from 'vue';
import { Select } from 'tdesign-vue-next';
import { LgDict } from '@/soar';
import { apiColumns, emitColumns, propColumns, slotColumns } from './index';

const value = ref();
const checkboxValue = ref([]);
const slotValue = ref();
const handleValue = ref();
function handler(list) {
  list = list.filter((x) => x.value !== 1);
  list.forEach((x) => {
    if (x.value === 2) {
      x.disabled = true;
    }
  });
  return list;
}

const propsData = [
  { name: 'code', desc: '字典code', type: 'string', def: '' },
  { name: 'hiddenValue', desc: '隐藏的选项', type: 'number | number[] | string', def: '[]' },
  { name: 'disabledValue', desc: '禁用的选项', type: 'number | number[] | string', def: '[]' },
  { name: 'handler', desc: '结果处理', type: 'Function<object[]>', def: 'v => v' },
  { name: 'prepend', desc: '前面的选项', type: 'Function | Object[] | Object', def: '' },
  { name: 'append', desc: '后面的选项', type: 'Function | Object[] | Object', def: '' },
  { name: 'component', desc: '展示组件', type: 'string | Component', def: 't-select' },
];

const emitData = [
  // { name: 'initialized', desc: '组件初始化事件', param: 'string' },
];

const apiData = [
  // { name: 'code', desc: '字典code', type: 'string', sample: '' },
];

const slotData = [{ name: 'default', desc: '默认插槽，用于自定义渲染', scope: 'options' }];
</script>
